<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:height="http://www.w3.org/1999/xhtml">
<head th:include="base :: common_header(~{::title},~{::link},~{::script})">
    <title>Login</title>
    <link rel="stylesheet" href="/css/main.css">
</head>
<br class="layui-bg-gray">
<style>
    .header{
        width: 100%;
        position: absolute;
        top: 0;
        height: 55px;

    }
    .layui-bg-black {
        background-color:  #009688!important;
    }
    .footer{
        text-align: center;
        width: 100%;
        position: absolute;
        bottom: 0;
        height: 75px;
       /* color:  rgb(95, 184, 120) !important;*/
    }
    .login-form{
        width: 350px;
        margin:0 auto;
    }
    .title{
        /*float: left;*/
        /*margin-left: 40px;*/
        font-size: 35px;
        /*margin-top: 5px;*/
        /*font-family: "微软雅黑 Light";
        color:  rgb(95, 184, 120);*/
        align-content: center;
        text-align: center;
        margin: auto;
        display:block;
        padding: 0  20px;

    }
    .copyright{
        position: relative;
        margin-top: 5px;
        font-size: 14px;
    }
</style>
    <div class="layui-bg-black header" style="height: 120px">
        <span>&nbsp;</span>
        <span class="title" ><span style="font-family: 华文行楷">山东农业大学</span><br><span style="font-weight: bold">离退休人员精准服务信息系统</span></span>
    </div>
</br></br></br>
    <div style="padding-top: 10%;">
        <div class="login-form" style=" border-color:#e2e2e2 ">
            <div class="layui-icon" style="text-align: center;font-size: 23px; color: #5FB878; "><i class="layui-icon" style="color: #5FB878; font-size: 23px">&#xe612; </i>账户登录</div>
            <br>
            <form action="validate" method="post" class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码：</label>
                    <div class="layui-input-inline">
                        <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                        <div class="layui-anim layui-anim-up" th:text="${#strings.isEmpty(errMsg)?'':errMsg}"
                             style="color: darkred ;font-size: 15px; width: 100px;">错误信息
                        </div>
                    </div>
                    <!--<div class="layui-form-mid layui-word-aux">辅助文字</div>-->
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">用户类型:</label>
                    <div class="layui-input-block">
                        <input type="radio" name="type" value="1" title="普通用户" checked="true">
                        <input type="radio" name="type" value="2" title="管理员">
                    </div>
                </div>
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-small " style="width: 100%; position: absolute; right: 50px;font-size: 15px"
                            type="submit">登录
                    </button>
                </div>
            </form>
        </div>
    </div>
    <div class="layui-bg-black footer">
        <span class="copyright" style="font-size:22px">Copyright @ 山东农业大学离退休工作处 | 2018年6月</span>
    </div>
<script>
    layui.use('form', function () {
        var form = layui.form;
    })
</script>

</body>
</html>